<template>  
    <div class="mr-root">
       <phead>
            <span class="s"> {{$route.params.name}}</span>
       </phead>
       <div class="content">
           <div class="main" v-for="(a,index) in xiao">
              <img :src=a.images alt=""></div>
            
           
       </div>
       <p class="xia" @click="next">下一话</p>
       <loding v-if="showload"></loding>
       <back-top></back-top>
    </div>
</template>
<script>
    import Phead from '../components/Head'
    import Loding from '../components/Loding'
    import BackTop from '../components/BackTop'
    export default{
        components:{
            Phead,Loding,BackTop
        },
        data(){
         return{
            xiao:[],
            showload:true,
            more:1
         }
        },
        created(){
             this.xia(this.more)
           
        },
        methods:{
            xia(page){
               this.axios.get('https://api.maimengjun.com/index.php?r=cartoonChapter/albumListByOrder&cartoonId='+this.$route.params.id+'&priority='+page)
          .then(data=>{
              console.log(data)
              this.xiao=this.xiao.concat(data.data.results)
            //   console.log(this.xiao)
                 setTimeout(() => {
                  this.showload = false
                },2000)
          })
        },
          next(){
                  this.more++
                this.xia(this.more)
             }
            }
         
    }
</script>
<style scoped>
      .xia{
         margin-left: 7rem;
         position: relative;
         top:1rem; 
      }
     .s{
        display: inline-block;
        position: relative;
        left:1.4rem;
        top: 0.2rem;
        font-size: 0.4rem;
          color: #ff4f65;
        font-weight: bolder;
        width: 3rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    p{
        width: 2.5rem;
          line-height: 0.8rem; 
          background: #ff4f65;
          color: white;
          text-align: center;
           font-size: 0.3rem;
           border-radius: 5px;
           position: relative;
           top:-4rem;
    }
    .content{
        margin-top: 1.2rem;
    }
    img{
        margin: 0;
        width:100%;
    }
</style>